<template>
  <div class="work-box">
    <div class="work-title-wrap">
      <div class="g-flex-start-center">
        <c-icon :type="icon"></c-icon>
        <p class="work-title">{{ name }}</p>
      </div>
      <slot name="right"></slot>
    </div>
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, withDefaults } from 'vue';
interface IProps {
  icon: string;
  name: string;
}
const props = withDefaults(defineProps<IProps>(), {
  icon: 'c-biao_zhibiaoshuju',
  name: '123131'
});
</script>
<style lang="scss" scoped>
.work-box {
  width: 100%;
  .work-title-wrap {
    height: 52px;
    background: linear-gradient(180deg, #f6fffd 0%, #ffffff 100%);
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .work-title {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #0a1f33;
      line-height: 24px;
      margin-left: 5px;
    }
  }
}
</style>
